<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
	font-family:"Arial","微軟正黑體";
}
.healthcard {
	background-color: #139A43;
	border-radius: 5%;
	box-shadow: 4px 4px 12px 4px rgba(20%, 20%, 40%, 0.3);
	width: 580px;
}

.healthicondiv {
	margin-top: 10%;
}

.card_container {
	text-align: left;
	margin-top: 4%;
	padding: 0 5%;
}

.card_span {
	margin: 3% 0 3% 0;
}

.card_spantitle {
	padding-top: 5%;
}

.card_spanchg {
	margin-left: 60%;
}

/*cardHealth.ccs*/
*, *:before, *:after {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.healthicondiv {
	position: relative;
	width: 100%;
	height: 300px;
	-webkit-animation: shake 3s infinite;
	animation: shake 3s infinite;
}

.hulk {
	width: 100%;
	height: 30%;
	position: absolute;
	margin-left: 200px;
	/*bottom: 0px;*/
	margin-bottom: 300px;
}

.hulk .head {
	width: 75.408px;
	position: absolute;
	margin-top: -44px;
	margin-left: 57.008px;
	border-bottom: 60px solid #bdbd00;
	border-left: 15.008px solid transparent;
	border-right: 15.008px solid transparent;
	height: 0;
	z-index: 10;
}

.hulk .head::after {
	content: "";
	width: 36px;
	height: 6px;
	position: absolute;
	margin-top: 8.608px;
	margin-left: 5.008px;
	background: #034600;
}

.hulk .head::before {
	content: "";
	width: 52px;
	height: 12px;
	position: absolute;
	margin-top: -12px;
	margin-left: -4px;
	background: #034600;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

.hulk .mouth {
	width: 31px;
	height: 0px;
	position: absolute;
	margin-top: 25px;
	margin-left: 8px;
	overflow: hidden;
	background-image: -webkit-linear-gradient(top, #ffffff, #ffffff 25%, #4b0a00 25%, #4b0a00
		70%, #ffffff 75%, #ffffff 100%);
	background-image: linear-gradient(to bottom, #ffffff, #ffffff 25%, #4b0a00 25%, #4b0a00
		70%, #ffffff 75%, #ffffff 100%);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	-webkit-animation: mouthOpen 3s infinite;
	animation: mouthOpen 3s infinite;
}

.hulk .mouth::before {
	content: "";
	width: 10px;
	height: 7px;
	position: absolute;
	background: #902e2b;
	margin-top: 9px;
	margin-left: 11px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.hulk .right-arm {
	width: 213.008px;
	height: 220px;
	margin-top: 16px;
	margin-left: 32px;
	border-radius: 50%;
	background: #b5b500;
	position: absolute;
	clip: rect(-16px, 179.2px, 200.8px, 122px);
	-webkit-animation: hulkRightarm 3s infinite;
	animation: hulkRightarm 3s infinite;
}

.hulk .right-arm::after {
	content: "";
	width: 193.008px;
	height: 154px;
	border-radius: 50%;
	background: #139A43;
	position: absolute;
	-webkit-transform: translateY(20px);
	-ms-transform: translateY(20px);
	transform: translateY(20px);
	margin-left: -3.313em;
}

.hulk .left-arm {
	width: 13.313em;
	height: 13.75em;
	margin-top: 1em;
	margin-left: -4.3em;
	border-radius: 50%;
	background: #949400;
	position: absolute;
	clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
	-webkit-animation: hulkLeftarm 3s infinite;
	animation: hulkLeftarm 3s infinite;
}

.hulk .left-arm::after {
	content: "";
	width: 193.008px;
	height: 154px;
	border-radius: 50%;
	background: #139A43;
	position: absolute;
	-webkit-transform: translateY(20px);
	-ms-transform: translateY(20px);
	transform: translateY(20px);
	margin-left: 4.563em;
}

.hulk .fist {
	width: 70px;
	height: 70px;
	position: absolute;
	border-radius: 50%;
	margin-top: 187.2px;
	margin-left: -33.6px;
	background: #949400;
	box-shadow: 177.6px 0 0 #b5b500;
	z-index: 10;
	-webkit-animation: hulkHands 3s infinite;
	animation: hulkHands 3s infinite;
}

.hulk .body {
	width: 200px;
	height: 200px;
	background: #bdbd00;
	border-radius: 50%;
	position: absolute;
	box-shadow: inset 18px 0 0 #a3a400, -15.008px 0 0 #8a8a00;
	z-index: 10;
}

.hulk .body::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	position: absolute;
	margin-top: 50px;
	margin-left: 22px;
	background: #8a8a00;
	box-shadow: 122px 0 0 #8a8a00;
}

.hulk .body::after {
	content: "";
	position: absolute;
	width: 5.008px;
	height: 5.008px;
	border-radius: 50%;
	margin-top: 160px;
	margin-left: 90px;
	background: #8a8a00;
	box-shadow: 0 42px 0 #9ac7f1;
}

.hulk .right-leg {
	width: 10px;
	height: 103.008px;
	position: absolute;
	margin-left: 68px;
	margin-top: 196.8px;
	background-image: -webkit-linear-gradient(top, #2e0e62, #2e0e62 50%, #575700 50%, #575700
		100%);
	background-image: linear-gradient(to bottom, #2e0e62, #2e0e62 50%, #575700 50%, #575700
		100%);
	-webkit-animation: hulkPants2 3s infinite;
	animation: hulkPants2 3s infinite;
}

.hulk .right-leg::after {
	content: "";
	width: 15.008px;
	height: 14px;
	position: absolute;
	margin-left: 10px;
	background: #43158e;
}

.hulk .right-leg::before {
	content: "";
	width: 18px;
	height: 3.008px;
	position: absolute;
	margin-top: 100px;
	margin-left: -18px;
	background: #575700;
}

.hulk .left-leg {
	width: 10px;
	height: 103.008px;
	position: absolute;
	margin-left: 107.008px;
	margin-top: 196.8px;
	background-image: -webkit-linear-gradient(top, #581bbb, #581bbb 50%, #bdbd00 50%, #bdbd00
		100%);
	background-image: linear-gradient(to bottom, #581bbb, #581bbb 50%, #bdbd00 50%, #bdbd00
		100%);
	-webkit-animation: hulkPants 3s infinite;
	animation: hulkPants 3s infinite;
}

.hulk .left-leg::after {
	content: "";
	width: 15.008px;
	height: 14px;
	position: absolute;
	background: #581bbb;
	margin-left: -15.008px;
}

.hulk .left-leg::before {
	content: "";
	width: 18px;
	height: 3.008px;
	position: absolute;
	margin-top: 100px;
	margin-left: 8px;
	background: #bdbd00;
}

/*Hand Animation*/
@
-webkit-keyframes shake { 78%,80%,82%,84%,86%,88%,90%,92% {
	top: 3px;
	left: 2px;
}

79%,81%,83%,85%,87%,89%,91%
{
top
:
 
0
px
;

		    
left
:
 
-2
px
;

		  
}
}
@
-ms-keyframes shake { 78%,80%,82%,84%,86%,88%,90%,92% {
	top: 3px;
	left: 2px;
}

79%,81%,83%,85%,87%,89%,91%
{
top
:
 
0
px
;

		    
left
:
 
-2
px
;

		  
}
}
@
keyframes shake { 78%,80%,82%,84%,86%,88%,90%,92% {
	top: 3px;
	left: 2px;
}

79%,81%,83%,85%,87%,89%,91%
{
top
:
 
0
px
;

		    
left
:
 
-2
px
;

		  
}
}
@
-webkit-keyframes mouthOpen { 77% {
	height: 0px;
}

80%
{
height
:
 
22
px
;

		  
}
93%
{
height
:
 
22
px
;

		    
opacity
:
 
1;
}
95%
{
height
:
 
0
px
;

		    
opacity
:
 
0;
}
}
@
-ms-keyframes mouthOpen { 77% {
	height: 0px;
}

80%
{
height
:
 
22
px
;

		  
}
93%
{
height
:
 
22
px
;

		    
opacity
:
 
1;
}
95%
{
height
:
 
0
px
;

		    
opacity
:
 
0;
}
}
@
keyframes mouthOpen { 77% {
	height: 0px;
}

80%
{
height
:
 
22
px
;

		  
}
93%
{
height
:
 
22
px
;

		    
opacity
:
 
1;
}
95%
{
height
:
 
0
px
;

		    
opacity
:
 
0;
}
}
@
-webkit-keyframes hulkHands { 6% {
	box-shadow: 11.1em 0 0 #b5b500;
}

77%
{
box-shadow
:
 
11
.1em
 
0
0
#b5b500
;

		    
margin-left
:
 
-2
.1em
;

		    
-ms-transform
:
 
translate
(0
,
0);
-webkit-transform
:
 
translate
(0
,
0);
transform
:
 
translate
(0
,
0);
}
80%
{
margin-left
:
 
0
.5em
;

		    
box-shadow
:
 
8
.5em
 
0
0
#b5b500
;

		    
-ms-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
-webkit-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		  
}
93%
{
margin-left
:
 
0
.5em
;

		    
box-shadow
:
 
8
.5em
 
0
0
#b5b500
;

		    
-ms-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
-webkit-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		  
}
94%
{
box-shadow
:
 
11
.1em
 
0
0
#b5b500
;

		    
margin-left
:
 
-2
.1em
;

		    
-ms-transform
:
 
translate
(0em
,
0
em
);

		    
-webkit-transform
:
 
translate
(0em
,
0
em
);

		    
transform
:
 
translate
(0em
,
0
em
);

		  
}
}
@
-ms-keyframes hulkHands { 6% {
	box-shadow: 11.1em 0 0 #b5b500;
}

77%
{
box-shadow
:
 
11
.1em
 
0
0
#b5b500
;

		    
margin-left
:
 
-2
.1em
;

		    
-ms-transform
:
 
translate
(0
,
0);
-webkit-transform
:
 
translate
(0
,
0);
transform
:
 
translate
(0
,
0);
}
80%
{
margin-left
:
 
0
.5em
;

		    
box-shadow
:
 
8
.5em
 
0
0
#b5b500
;

		    
-ms-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
-webkit-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		  
}
93%
{
margin-left
:
 
0
.5em
;

		    
box-shadow
:
 
8
.5em
 
0
0
#b5b500
;

		    
-ms-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
-webkit-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		  
}
94%
{
box-shadow
:
 
11
.1em
 
0
0
#b5b500
;

		    
margin-left
:
 
-2
.1em
;

		    
-ms-transform
:
 
translate
(0em
,
0
em
);

		    
-webkit-transform
:
 
translate
(0em
,
0
em
);

		    
transform
:
 
translate
(0em
,
0
em
);

		  
}
}
@
keyframes hulkHands { 6% {
	box-shadow: 11.1em 0 0 #b5b500;
}

77%
{
box-shadow
:
 
11
.1em
 
0
0
#b5b500
;

		    
margin-left
:
 
-2
.1em
;

		    
-ms-transform
:
 
translate
(0
,
0);
-webkit-transform
:
 
translate
(0
,
0);
transform
:
 
translate
(0
,
0);
}
80%
{
margin-left
:
 
0
.5em
;

		    
box-shadow
:
 
8
.5em
 
0
0
#b5b500
;

		    
-ms-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
-webkit-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		  
}
93%
{
margin-left
:
 
0
.5em
;

		    
box-shadow
:
 
8
.5em
 
0
0
#b5b500
;

		    
-ms-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
-webkit-transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		    
transform
:
 
translate
(-0
.9em
,
-19
.9em
);

		  
}
94%
{
box-shadow
:
 
11
.1em
 
0
0
#b5b500
;

		    
margin-left
:
 
-2
.1em
;

		    
-ms-transform
:
 
translate
(0em
,
0
em
);

		    
-webkit-transform
:
 
translate
(0em
,
0
em
);

		    
transform
:
 
translate
(0em
,
0
em
);

		  
}
}
@
-webkit-keyframes hulkRightarm { 77% {
	margin-top: 1em;
	margin-left: 2em;
	clip: rect(-1em, 11.2em, 12.55em, 7.625em);
}

80%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
2
.5em
;

		    
clip
:
 
rect
(0
.563em
,
13
.363em
,
13
.75em
,
6
.625em
);

		  
}
93%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
2
.5em
;

		    
clip
:
 
rect
(0
.563em
,
13
.363em
,
13
.75em
,
6
.625em
);

		  
}
95%
{
margin-top
:
 
1
em
;

		    
margin-left
:
 
2
em
;

		    
clip
:
 
rect
(-1em
,
11
.2em
,
12
.55em
,
7
.625em
);

		  
}
}
@
-ms-keyframes hulkRightarm { 77% {
	margin-top: 1em;
	margin-left: 2em;
	clip: rect(-1em, 11.2em, 12.55em, 7.625em);
}

80%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
2
.5em
;

		    
clip
:
 
rect
(0
.563em
,
13
.363em
,
13
.75em
,
6
.625em
);

		  
}
93%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
2
.5em
;

		    
clip
:
 
rect
(0
.563em
,
13
.363em
,
13
.75em
,
6
.625em
);

		  
}
95%
{
margin-top
:
 
1
em
;

		    
margin-left
:
 
2
em
;

		    
clip
:
 
rect
(-1em
,
11
.2em
,
12
.55em
,
7
.625em
);

		  
}
}
@
keyframes hulkRightarm { 77% {
	margin-top: 1em;
	margin-left: 2em;
	clip: rect(-1em, 11.2em, 12.55em, 7.625em);
}

80%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
2
.5em
;

		    
clip
:
 
rect
(0
.563em
,
13
.363em
,
13
.75em
,
6
.625em
);

		  
}
93%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
2
.5em
;

		    
clip
:
 
rect
(0
.563em
,
13
.363em
,
13
.75em
,
6
.625em
);

		  
}
95%
{
margin-top
:
 
1
em
;

		    
margin-left
:
 
2
em
;

		    
clip
:
 
rect
(-1em
,
11
.2em
,
12
.55em
,
7
.625em
);

		  
}
}
@
-webkit-keyframes hulkLeftarm { 77% {
	margin-top: 1em;
	margin-left: -4.3em;
	clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
}

80%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
-4
.375em
;

		    
clip
:
 
rect
(-0
.188em
,
6
.563em
,
13
.875em
,
0
em
);

		  
}
93%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
-4
.375em
;

		    
clip
:
 
rect
(-0
.188em
,
6
.563em
,
13
.875em
,
0
em
);

		  
}
95%
{
margin-top
:
 
1
em
;

		    
margin-left
:
 
-4
.3em
;

		    
clip
:
 
rect
(-0
.188em
,
6
.1em
,
13
.875em
,
2
.3em
);

		  
}
}
@
-ms-keyframes hulkLeftarm { 77% {
	margin-top: 1em;
	margin-left: -4.3em;
	clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
}

80%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
-4
.375em
;

		    
clip
:
 
rect
(-0
.188em
,
6
.563em
,
13
.875em
,
0
em
);

		  
}
93%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
-4
.375em
;

		    
clip
:
 
rect
(-0
.188em
,
6
.563em
,
13
.875em
,
0
em
);

		  
}
95%
{
margin-top
:
 
1
em
;

		    
margin-left
:
 
-4
.3em
;

		    
clip
:
 
rect
(-0
.188em
,
6
.1em
,
13
.875em
,
2
.3em
);

		  
}
}
@
keyframes hulkLeftarm { 77% {
	margin-top: 1em;
	margin-left: -4.3em;
	clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
}
80%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
-4
.375em
;

		    
clip
:
 
rect
(-0
.188em
,
6
.563em
,
13
.875em
,
0
em
);

		  
}
93%
{
margin-top
:
 
-8
.125em
;

		    
margin-left
:
 
-4
.375em
;

		    
clip
:
 
rect
(-0
.188em
,
6
.563em
,
13
.875em
,
0
em
);

		  
}
95%
{
margin-top
:
 
1
em
;

		    
margin-left
:
 
-4
.3em
;

		    
clip
:
 
rect
(-0
.188em
,
6
.1em
,
13
.875em
,
2
.3em
);

		  
}
}
</style>
</head>
<body>
	<div class="healthcard grid_6 grid_6_chg">
		<div class="card_container">
			<h3 class="card_span card_spantitle">
				<span class="">TO: example_receiver</span>
			</h3>
			<p id="preview_text">
			<h4>example_text</h4>
			</p>
			<h3 class="card_span card_spanchg">
				<span class="">From: example_sender</span>
			</h3>
		</div>
		<div class="healthicondiv">
			<div class="hulk">
				<div class="head">
					<div class="mouth"></div>
				</div>
				<div class="right-arm"></div>
				<div class="fist"></div>
				<div class="left-arm"></div>
				<div class="body"></div>
				<div class="right-leg"></div>
				<div class="left-leg"></div>
			</div>
		</div>
	</div>
</body>
</html>